page-home {
    ion-header{
        
        .input-bar{
            position: relative;
            
            height:35px;
            width:80%;
            left: 5%;
            background: #ffffff;
            border-radius:35px;
            padding:5px;
            padding-left:10px;
            line-height: 35px;
            ion-icon{
                font-size: 20px;
                color:#333;

            }
            span{
                position: relative;
                top:-3px;
                left:5px;
                color:#aaa;
            }
            .message{
              color:#fff;
              position: absolute;
              top:5px;
              right:0;
              transform: translateX(150%);
              font-size: 25px;
            }
        }
        .refresh{
          background: linear-gradient(to right, #347eff, #1ea3ff);
          opacity: 1;
        }
    }
   
    .has-refresher > .scroll-content{
        border-top:none;
    }

    .slider{
        margin-top:45px;
    }
    .function{
        text-align: center;
        padding-bottom: 5px;
       // border-bottom: 1px solid #eeeeee;
        ion-grid{
            padding:0;
        }
        img{
            width: 60%;
            max-width: 56px;
            height: auto;
        }
        p{
            font-size: 12px;
            margin:0;
        }
    }

    .index-trumpet{
       // border-bottom: 1px solid #eeeeee;
        height: 50px;
        &:after{
            content:"";
            clear: both;
            display: block;
        }
        .title{
            float: left;
            width:100px;
            max-width: 100px;
            margin-left:10px;
            img{
                width:100%;
            }
        }
        .roll-box{
            margin-left:110px;
            overflow: hidden;
            position: relative;
            height: 50px;
            ul{
                position: absolute;
                width:100%;
                animation: "roll" 5s linear infinite;
                li{
                    padding-left: 15px;
                    height: 50px;
                    white-space:nowrap;
                    span{
                        height: 26px;
                        margin-top: 11px;
                        float: left;
                        box-sizing: border-box;
                        padding:3px 5px;
                        line-height: 18px;
                        &.label{
                            border:1px solid red;
                            border-radius: 3px;
                            color:red;
                            font-size: 10px;

                        }
                        &.value{
                            line-height: 20px;
                        }
                        &.more{
                            float:right;
                            margin-right: 15px;
                            line-height: 20px;
                            color:#FF5100;
                            font-size: 10px;
                        }
                    }
                }
            }

            @keyframes roll {
                0%{
                    transform: translateY(0px);
                }
                25%{
                    transform: translateY(-50px);
                }
                50%{
                    transform: translateY(-50px);
                }
                75%{
                    transform: translateY(-100px);
                }
                100%{
                    transform: translateY(-100px);
                }
            }
        }
    }
    .promotion{
        text-align: center;
        img{
            width:100%;
        }
        .time{
            display: inline-block;
            vertical-align: middle;
            background: #111;
            padding:3px 5px;
            border-radius: 3px;
            color:#ffffff;
        }
        .second{
            display: inline-block;
            vertical-align: middle;
            background: red;
            padding:3px 5px;
            border-radius: 3px;
            color:#ffffff;
        }
    }
    .promo-list{
        margin-top:5px;
        li{
            float:left;
            font-size: 12px;
            padding:0 5px;
            max-width: 100px;
            position: relative;
            span{
                position: absolute;
                top:0;
                right: 0;
                padding:3px;
                background: #FF5100;
                color:#ffffff;
                font-size: 10px;
            }
            img{
                width: 90px;
            }
            p{
                white-space:nowrap;
                word-wrap:break-word;
                word-break:break-all;
                overflow : hidden;
                text-overflow: ellipsis;
            }
            div{
                text-align: center  ;
                color:red;
                font-size: 14px;
            }
        }
    }
    .special{
        img{
            width:100%;
            display: block;
        }
        .price{
          color:#9b39e2;
        }
        ion-grid{
            padding:0;
        }
        p{
          text-align: center;
          color:#707070;
        }
    }
    .hot{
      p{
        text-align: center;
        font-size: 12px;

        color:#707070;
      }
        img{
            width:100%;
            display: block;
        }
        .price{
          color:#ef2933;
          font-size: 12px;
        }
        ion-grid{
            padding:0;
        }
        ion-col:not(:last-child){
            border-right:1px solid #eee;
        }
        ion-row:not(:last-child){
            ion-col{
                border-bottom:1px solid #eee;
            }
        }
    }

    .coupon_list{
      background: #ffffff;
      ul{
        white-space: nowrap;
      }
      li{
        padding:10px;
        display: inline-block;
        background:  linear-gradient(to right,  rgb(255, 51, 0), #FF5100);
        margin:5px 0;
        margin-left: 10px;
        >div{
          height: 60px;
          border:1px dashed #ffffff;
          color:#ffffff;
          padding-top:5px;
          >div{
            display: inline-block;
            vertical-align: middle;
            height: 50px;
          }
          .price{
            font-size: 16px;
            line-height: 30px;
            border-right: 1px solid #ffffff;
            padding:0 5px;
            text-align: center;
            span{
              font-size: 28px;
            }
            p{
              line-height: 15px;
              font-size: 12px;
              text-align: center;
            }
          }
          .get{
            text-align: center;
            font-size: 14px;
            padding:0 5px;
            span{
              display: block;
              line-height: 29px;
            }
            p{
              border-top: 1px solid #ffffff;
              line-height: 20px;
              font-size: 12px;
              display: inline-block;
            }

          }
        }
      }
    }
  .notice{
    position: fixed;
    width:100%;
    height:100vh;
    top:0;
    left: 0;
    display: flex;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    transition: all .3s linear;
    &.hide{
        transform: scale(0);
    }
    .content{
      width: 230px;

      background: transparent;
      border-radius: 5px;
      position: relative;
      img{
        width:100%;
        height: auto;
      }
      ion-icon{
        position: absolute;
        bottom:-40px;
        left:50%;
        transform: translateX(-50%);
        color:#fff;
        font-size: 26px;
      }
    }
  }
  .more_goods{
    background: #EFF4FA;
    &:after{
      content:'';
      clear: both;
      display: block;
    }
    .goods_item{
      background: #fff;
      margin:2vw;
      width:46vw;
      box-sizing: border-box;
      padding:10px;
      float: left;
      img{
        width:100%;
      }
      p{
        line-height: 20px;
      }
      p.name{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color:#707070;
        font-size: 12px;
      }
      p.price{
        color:#969696;
        font-size: 12px;

        span:first-child{
          color:#FF5100;
          font-size: 14px;
        }
        span:last-child{
          float: right;
          text-decoration: line-through;
        }

      }
    }

  }
  .maxh{
    img{
      width: 100%;
      height: auto;
      max-height:20vw;
    }
  }
}
